<template>
  <div class="work-container">
    <div>
      <div class="add-name-box">
        <span class="add-name-text">{{ explainTrue ? '保养说明' : '故障描述' }}</span>
      </div>
      <van-field
        v-model="deviceExplain"
        type="textarea"
        placeholder="请输入"
        autosize
        maxlength="100"
        error-message=""
      />
    </div>
    <div>
      <div class="add-name-box">
        <span class="app-form-red">*</span>
        <span class="add-name-text">现场联系人</span>
      </div>
      <van-field v-model="workContacts" placeholder="请输入" error-message="" />
    </div>
    <div>
      <div class="add-name-box">
        <span class="app-form-red">*</span>
        <span class="add-name-text">联系人电话</span>
      </div>
      <van-field v-model="workPhone" placeholder="请输入" error-message="" />
    </div>

    <div class="workReport-padding">
      <div class="workReport-box">
        <div>
          <span class="add-name-text">现场图片</span>
        </div>
        <div class="img-box">
          <van-uploader v-model="fileList" max-count="5" @click-upload="upload" />
        </div>
      </div>
    </div>

    <div>
      <div class="add-name-box">
        <span class="add-name-text">设备地址</span>
      </div>
      <van-field v-model="deviceAddres" placeholder="请输入" error-message="" />
    </div>

    <div class="button-margin">
      <van-button block type="info">确 定</van-button>
    </div>
  </div>
</template>
<script>
import { Form, ActionSheet, Cell, CellGroup, Field, Button, Switch, Uploader, Popup, Search } from 'vant';
export default {
  name: 'editWorkOrderManage',
  components: {
    [Form.name]: Form, //表单
    [ActionSheet.name]: ActionSheet, //动作面板
    [Field.name]: Field, //输入框
    [Button.name]: Button, //按钮
    [Switch.name]: Switch, //开关
    [Cell.name]: Cell, //单元格
    [CellGroup.name]: CellGroup, //单元格
    [Uploader.name]: Uploader, //上传文件
    [Popup.name]: Popup, //弹窗
    [Search.name]: Search
  },
  data() {
    return {
      sheetShow: false, //打开面板
      sheetActions: [{ name: '维修工单' }, { name: '保养工单' }],
      sheetWorkValue: '维修工单',
      deviceName: '', //设备名称
      deviceId: '', //设备id
      deviceExplain: '', //故障描述
      explainTrue: false, //判断是故障描述还是保养说明
      workReport: false, //上次供应商
      workContacts: '', //现场联系人
      workPhone: '', //联系人电话
      deviceAddres: '', //设备地址
      workCompany: '', //所属公司
      fileList: [
        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }
        // Uploader 根据文件后缀来判断是否为图片文件
      ],
      showVar: false,
      searchKey: ''
    };
  },
  mounted() {},
  methods: {
    //选择工单类型
    onSheetSelect(item) {
      this.show = false;
      if (item.name === '保养工单') {
        this.explainTrue = true;
      } else {
        this.explainTrue = false;
      }
      this.explainTrue;
      this.sheetWorkValue = item.name;
      console.log(this.fileList);
    },
    upload(file) {}
  }
};
</script>
<style lang="scss" scoped>
.work-container {
  background-color: #fff;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1.866667rem;
}
.app-form-red {
  color: #f56c6c;
  font-size: 0.32rem;
}
.add-name-box {
  margin-left: 0.426667rem;
}
.add-name-text {
  color: #666666;
  font-size: 0.32rem;
}

::v-deep .van-field__value {
  border-bottom: 1px solid #f2f6fc;
}
//上报供应商
.workReport-padding {
  padding: 0 0.426667rem;
  .workReport-box {
    border-bottom: 1px solid #f2f6fc;
  }
  .workReport-top {
    display: flex;
    justify-content: space-between;
  }
  .workReport-name-text {
    margin-top: 0.266667rem;
    color: #666666;
    font-size: 0.373333rem;
  }
  .workReport-tips-text {
    font-size: 0.346667rem;
    color: #999999;
    padding: 0.4rem 0;
  }
}
.img-box {
  margin-top: 0.426667rem;
}

//按钮
.button-margin {
  margin: 0.426667rem;
  position: fixed;
  width: 91%;
  bottom: 0.053333rem;
  padding-bottom: 0.533333rem;
}
::v-deep .van-button {
  border-radius: 0.106667rem;
}

//选择器
.van-popup--bottom {
  border-top-left-radius: 0.426667rem;
  border-top-right-radius: 0.426667rem;

  .var-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .var-box-header {
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.213333rem;
      padding: 0 0.426667rem;
      padding-top: 0.426667rem;

      .model-name {
        margin-right: 0.266667rem;
        font-size: 0.426667rem;
        line-height: 0.533333rem;
      }

      .model-choose {
        flex-shrink: 0;
        color: var(--color-deep-gary);
        font-size: 0.32rem;
      }
    }

    .var-search-box {
      flex-shrink: 0;
      margin-bottom: 0.213333rem;
      border-bottom: 1px solid var(--border-color);
    }

    .var-list {
      flex: 1;
      width: 100%;
      padding: 0 0.426667rem;

      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.32rem 0;
        font-size: 0.373333rem;
        border-bottom: 1px solid var(--border-color);

        &:last-of-type {
          border-bottom: 0;
        }
      }
    }

    .operate-box {
      flex-shrink: 0;
      display: flex;
      width: 100%;
      height: 1.28rem;
      border-top: 1px solid var(--border-color);

      li {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        font-size: 0.426667rem;

        &:first-of-type {
          &::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 1px;
            height: 100%;
            background-color: var(--border-color);
          }
        }
      }
    }
  }
}
</style>
